<template>
  <div class="downloadContractDialog">
    <el-dialog
      v-model="dialogVisible"
      title="选择合同下载"
      width="40%"
      :before-close="handleClose"
    >
      <template #default>
        <public-table
          index
          :isPaging="false"
          :header-cell-style="{ background: '#f7f7fa' }"
          :page="page"
          :tableData="tableData"
          :tableOption="tableOption"
          :operation="true"
        >
          <template #menu="scope">
            <el-button @click="onDownloadFile(scope.row)" link>下载</el-button>
          </template>
        </public-table>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import PublicTable from "@/components/PublicTable";
import { ElDialog } from "element-plus";
import { downloadFile } from "@/common/utils/GlobalUtils";

const props = defineProps({
  tableData: {
    type: Array,
    default: [],
  },
  visible: {
    type: Boolean,
    default: false,
  },
});

let emits = defineEmits(["update:visible"]);

const dialogVisible = ref(props.visible);
const page = reactive({
  total: 0,
  current: 1,
  size: 50,
});
const tableOption = ref([
  { label: "合同名称 ", prop: "fileName", overHidden: false, width: "500", align: "center" },
]);

const handleClose = () => {
  emits("update:visible", false);
};

const onDownloadFile = (row) => {
  downloadFile(row.fileAddress, row.fileName);
};

// 监听visible的变化 只能监听第一次的变化
watch(
  () => props.visible,
  (value) => {
    dialogVisible.value = value;
  }
);

// 监听组件内部的dialogVisible变化
watch(
  () => dialogVisible.value,
  (value) => {
    emits("update:visible", value);
  }
);
</script>

<style lang="scss" scoped>
.downloadContractDialog {
}
</style>
